<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>javascript基础</title>
    <!-- object对象方法 -->
    <!-- <script async src="./js/3.0.string-methods.js"></script> -->
    <!-- <script async src="./js/4.number-methods.js"></script> -->
    <!-- <script async src="./js/5.0.date-methods.js"></script> -->
    <!-- <script async src="./js/6.arrary-methods.js"></script> -->
    <!-- <script async src="./js/7.method-concept.js"></script> -->
    <script async src="./js/9.0.oriented-object.js"></script>
    <!-- <script async src="./js/9.1.object-methods.js"></script> -->
</head>

<body>
    <h1>javascript基础</h1>
    <div class="content">
        <h3> 脚本调用策略小结：</h3>
        <h3>1、如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。</h3>
        <h3>2、如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。</h3>
    </div>
    <h2>1.基础数据类型</h2>
    <h2>2.复杂数据类型</h2>
    <h2>9.object对象方法</h2>

    <div class="image-container">
       <img src="images/bg-home.jpg" width="500px" height="350px" />
    </div>

    <div class="container">
        <h1>1、router实现hash模式</h1>
        <div class="nav">
            <div class="nav-header">
                <a href="#/home">Home</a>
                <a href="#/about">About</a>
            </div>
            <div class="nav-content">
                <div id="app"></div>
            </div>
        </div>
    </div>
    <div class="container">
        <h1>2、router实现history</h1>
        <div class="nav">
            <div class="nav-header">
                <a onclick="go('/home')">Home</a>
                <a onclick="go('/about')">About</a>
            </div>
            <div class="nav-content">
                <div id="root"></div>
            </div>
        </div>
    </div>
    <div class="container">
        <h1>3、location</h1>
        <div class="nav">
            <div class="nav-header">
                <div class="btn" onclick="toPage('')">点击显示</div>
            </div>
            <div class="nav-content">
                <div id="route"></div>
            </div>
        </div>
    </div>
</body>

</html>